.container{
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    box-sizing: border-box;
}

.top-container{
    height: 180px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    .header-title {
        height: 50px !important;
        width: 100% !important;
        text-align: center;
        line-height: 50px;
        position: relative;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        position: absolute;
        left: 45%;
        font-size: 20px;
    }

    .card-list{
        flex: 1;
        height: 130px;
        display: flex;
        flex-direction: row;
        //border-bottom: 1px dashed #cecece;

        .card-list-left{
            width: 13%;
            height: 100%;
            text-align: center;
            font-size: 16px;
            letter-spacing: 2px;
            color: #0f0667;
            padding: 10px 10px 10px 0;
            box-sizing: border-box;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            .header-time{
                display: flex;
                flex-direction: row;
                line-height: 50px;
                padding: 0 10px;

                .titl{
                    height: 100%;
                    width: auto;
                    font-size: 22px;
                    color: rgb(153, 153, 153);
                }
                .name{
                    flex: 1 1 auto;
                    font-size: 16px;

                }
            }
            .timeLsit{
                flex: 1;
                display: flex;
                flex-direction: row;
                padding: 0 10px;
                .titl{
                    height: 100%;
                    width: auto;
                    font-size: 22px;
                    color: rgb(153, 153, 153);
                    overflow: hidden;
                }
                .times{
                    text-align: center;
                    flex: 1;
                }
            }


        }

        .card-list-right{
            flex: 1;
            height: 130px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            //border-left: 1px solid #cecece;

            .card-header{
                height:40px;
                width: 100%;
                font-size: 18px;
                line-height: 40px;
                letter-spacing: 2px;
                border-bottom: 1px  dashed #cecece;
                background-color: #fff;
                text-align: left;
                color: #0f0667;
                padding-left: 20px;
                box-sizing: border-box;
            }
            .card-list-info{
                flex: 1;
                height: 90px;
            }
        }
    }
}

.bottom-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .bottom-header{
        height: 30%;
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;

        .select-line{
            width: 13%;
            height: 100%;
            margin-right: 10px;
            background-color: #fff;
        }
        .bottom-list{
            flex: 1;
            width: 85%;
            display: flex;
            flex-direction: column;

            .line-number{
                height: 40%;
                width: 100%;
                margin-bottom: 10px;
                display: flex;
                flex-direction: row;
                box-sizing: border-box;

                .date-departure{
                    width: 35%;
                    height: 100%;
                    margin-right: 10px;
                    background-color: #fff;

                    .classes{
                        width: 100%;
                        height: 50%;
                        font-size: 18px;
                        padding: 5px 20px;
                        box-sizing: border-box;
                        color: #0f0667;

                        &-title{
                            height: 100%;
                            width: auto;
                            display: inline-block;
                            text-align: left;
                            padding: 0 15px 0 30px;
                            line-height: 300%;
                        }
                        &-select{
                            display: inline-block !important;
                        }
                    }
                }

                .line-classify{
                    height: 100%;
                    width: 100%;
                    box-sizing: border-box;
                    overflow: hidden;
                    margin-bottom: 5px;
                }
            }

            .real-time{
                flex: 1;
                display: flex;
                flex-direction: row;
                overflow: hidden;

                &-JKJ{
                    height: 100%;
                    width: 33%;
                    background-color: #fff;
                    margin-right: 10px;
                    padding-bottom: 10px;
                    box-sizing: border-box;
                }

                &-DR{
                    flex: 1;
                    background-color: #fff;
                    padding-bottom: 10px;
                    box-sizing: border-box;
                }
            }
        }
    }
    .bottom-history{
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;

        // &-JKJ{
        //     width: 33%;
        //     margin-right: 10px;
        //     background-color: #fff;
        // }

        // &-DR{
        //     flex: 1;
        //     background-color: #fff;
        // }
    }
}


